<template>
  <div>
    <div class="row-header">
      <el-form :model="form" :rules="formRules" label-width="150px" :inline="true">
        <el-form-item label="流量池名称" prop="flowPoolName">
          <el-input size="small" style="width: 300px;" v-model="form.flowPoolName"></el-input>
        </el-form-item>
        <el-form-item label="运营商" prop="dictOperator">
          <el-input size="small" style="width: 300px;" v-model="dictOperator"></el-input>
        </el-form-item>
      </el-form>
      <div class="row-form-btn">
        <el-button type="shenda" size="small" icon="el-icon-search" @click="currentPage=1;initData()">查询</el-button>
      </div>
    </div>
    <div class="split-line"></div>
    <div class="row-main">
      <el-button type="shenda" size="small" icon="el-icon-plus" @click="toAddPool" v-has="'AddPoolPer'">增加流量池</el-button>
      <el-table :header-cell-style="{ 'background':$store.state.app.tableBgColor,'color':'#606266' }" :data="tableData" tooltip-effect="dark" class="row-main-table" @selection-change="handleSelectionChange" v-loading.fullscreen="tableLoading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.2)">
        <el-table-column type="selection" align="center"></el-table-column>
        <el-table-column prop="flowPoolName" label="流量池名称" align="center"></el-table-column>
        <el-table-column prop="dictOperator" label="所属运营商" align="center"></el-table-column>
        <el-table-column prop="singleCardMeal" label="共享套餐" align="center"></el-table-column>
        <el-table-column prop="theoryFlow" label="理论流量" align="center"></el-table-column>
        <el-table-column prop="containsFlow" label="实际流量" align="center"></el-table-column>
        <el-table-column prop="virtualUsedFlow" label="虚出流量" align="center"></el-table-column>
        <el-table-column prop="remainingFlow" label="剩余实际流量" align="center"></el-table-column>
        <el-table-column prop="usedFlow" label="已使用" align="center"></el-table-column>
        <el-table-column prop="cardNumber" label="挂卡数量" align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="toCardList(scope.row)">{{ scope.row.cardNumber }}</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="activationCardNumber" label="已开卡数" align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="toCardListForACTIVATE(scope.row)">{{ scope.row.activationCardNumber }}</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="sleepCardNumber" label="未开卡数" align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="toCardListForDEACTIVATED(scope.row)">{{ scope.row.sleepCardNumber }}</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="agentName" label="操作" align="center">
          <template slot-scope="scope">
            <el-dropdown trigger="click">
              <div>
                <svg-icon class="el-dropdown-link" icon-class="operation"></svg-icon>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>
                    <el-button class="operation" @click="toEdit(scope.row)" v-has="'EditPackagePer'">流量池编辑</el-button>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <el-button class="operation" @click="toUsage(scope.row)" v-has="'usagePer'">池用量统计</el-button>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <el-button class="operation" @click="toNextLevel(scope.row)" v-has="'toNextLevel'">下属流量池</el-button>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <el-button class="operation" @click="toShare(scope.row)" v-has="'SharePer'">下分流量池</el-button>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </div>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
      <div :style="{'overflow-x': $store.state.app.screenWidth<992?'scroll':'none'}">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          class="row-main-pager"
          :current-page.sync="currentPage"
          :page-size="pageSize"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          :page-sizes="[10,20,50,100]"
          background></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import {primaryFlowPoolList} from '@/api/getData'

export default {
  name: 'Pool',
  data() {
    const validateFlowPoolName = (rule, value, callback) => {
      if (value.length > 60) {
        callback(new Error('流量池名称不能超过60位'))
      } else {
        callback()
      }
    }
    return {
      form: {
        flowPoolName: '',
        dictOperator: ''
      },
      formRules: {
        flowPoolName: [{trigger: 'blur', validator: validateFlowPoolName}]
      },
      tableData: [],
      total: 0,
      pageSize: 10,
      currentPage: 1,
      ascs: [],
      descs: [],
      tableLoading: false,
      multipleSelection: [],
      agentName: '',
      value: false,
      flowPoolName: '',
      dictOperator: '',
      singleCardMeal: '',
      theoryFlow: '',
      containsFlow: '',
      virtualUsedFlow: '',
      remainingFlow: '',
      usedFlow: '',
      cardNumber: '',
      activationCardNumber: '',
      unopenedCardNumber: ''
    }
  },
  created() {
    this.initData()
  },
  methods: {
    toAddPool() {
      this.$router.push({path: '/package/add-pool'})
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
      this.initData();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.initData();
    },
    async initData() {
      this.tableLoading = true;
      let returnData = await primaryFlowPoolList({
          page: {
            current: this.currentPage + '',
            size: this.pageSize + '',
            ascs: this.ascs,
            descs: this.descs
          }
        },
        {
          obj: this,
          key: 'tableLoading'
        })
      this.tableData = [];
      this.total = 0;
      if (returnData._result) {
        // 数据回显
        if (returnData.data.records && returnData.data.records.length > 0) {
          returnData.data.records.map(item => {
            const obj = {}
            obj.id = item.id
            obj.flowPoolName = item.flowPoolName // 流量池名称
            obj.dictOperator = item.dictOperatorName // 所属运营商
            obj.singleCardMeal = item.singleCardMeal // 共享套餐
            obj.theoryFlow = item.theoryFlow // 理论流量
            obj.containsFlow = item.containsFlow // 实际流量
            obj.virtualUsedFlow = item.virtualUsedFlow // 虚出流量
            obj.remainingFlow = item.remainingFlow // 剩余实际流量
            obj.usedFlow = item.usedFlow // 已使用
            obj.cardNumber = item.cardNumber // 挂卡数量
            obj.activationCardNumber = item.activationCardNumber // 已开卡数
            obj.sleepCardNumber = item.sleepCardNumber // 未开卡数
            this.tableData.push(obj)
          });
        }
        this.total = returnData.data.total;
        this.tableLoading = false;
      }
    },
    toCardList(card) {
      this.$router.push({path: `/package/card-list/${card.id}/null`})
    },
    toCardListForACTIVATE(card) {
      this.$router.push({path: `/package/card-list/${card.id}/ACTIVATE`})
    },
    toCardListForDEACTIVATED(card) {
      this.$router.push({path: `/package/card-list/${card.id}/DEACTIVATED`})
    },
    toEdit(card) {
      this.$router.push({path: `/package/edit-pool/${card.id}`})
    },
    toUsage() {
      this.$router.push({path: '/package/usage'})
    },
    toNextLevel(card) {
      this.$router.push({path: `/package/next-level/${card.id}`})
    },
    toShare(firstfixedpool) {
      this.$router.push({path: `/package/share/${firstfixedpool.id}`})
    }
  }
}
</script>

<style scoped lang="scss">

.el-popper[x-placement^=bottom] {
  margin-right: -47px;
  box-shadow: 0px 0px 10px #888888;
  margin-left: 6px;

  .operation {
    border: 0;
    outline: none;
    display: block;
    text-align: center;
    margin: 0;
  }
}

.el-popper[x-placement^=top] {
  box-shadow: 0px 0px 10px #888888;
  margin-left: 6px;
  margin-right: -39px;

  button {
    display: block;
  }

  .operation {
    border: 0;
    outline: none;
    display: block;
    text-align: center;
    margin: 0;
  }
}
</style>
